<!-- 设备管理  -->
<template>
  <div class="equipmentManagement">
    <header class="equipment-header">
      <el-row :gutter="20">
      <el-col :span="5">
        <el-input v-model="from.destName" clearable placeholder="请输入主机名称" size="small"></el-input>
      </el-col>
      <el-col :span="5">
        <el-input v-model="from.devIp" clearable placeholder="ip地址" size="small"></el-input>
      </el-col>
        <el-col :span="5">
        <el-input v-model="from.devMac" clearable placeholder="mac地址" size="small"></el-input>
      </el-col>
       <el-col :span="5">
        <el-select v-model="value" placeholder="请选择" @visible-change="visibleChange">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2" :offset="7">
        <el-button type="primary" size="small" @click="query">查询</el-button>
      </el-col>
      </el-row>
    </header>

    <main class="equipment-main">
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        class="table-border"
        :header-cell-style="{ background: '#ebeef5' }"
      >
        <el-table-column
         v-for="(item , index) in tableHeader"
         :key="index"
         :prop="item.prop"
         :label="item.label"
         :min-width="item.width"
        >
        </el-table-column>

      </el-table>

      <!-- 分页器 -->
       <pagination
        :total="total"
        :page.sync="page.pageNumber"
        :limit.sync="page.pageSize"
        @pagination="getList"
      />
    </main>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Pagination from "@/components/Pagination";
import action from '@/api/internetManagement';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {Pagination},
  data() {
    //这里存放数据
    return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
      from: {  //搜索数据
        destName:'', //主机名称
        devIp:'' , //ip地址
        devMac:'' ,//mac地址
      },

      page:{ //分页器数据
         pageNumber:1,
         pageSize:10
      },

       total:0,

      tableData: [],

       tableHeader: [ //表格头部数据
        {
          label:'主机名称',
          prop:'destName',
        },
        {
          label:'IP地址',
          prop:'devIp',
        },
        {
          label:'mac地址',
          prop:'devMac',
        },
       ]

    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    visibleChange(){
      console.log('====================================');
      console.log('可以触发');
      console.log('====================================');
    },
    //获取表格数据
    getList() {
      let data = {...this.page , ...this.from}
      action.selectDevice(data).then(res=>{
        this.total = res?.data?.total;
        this.tableData = res?.data?.records;
      })
    },
    //查询数据
    query() {
      this.page.pageNumber = 1;
      this.getList()
    },

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getList()
  },
};
</script>

<style lang='scss' scoped>
.equipmentManagement {
  padding: 20px;
  .equipment-header {
    box-shadow: 1px 2px 3px 3px #e4e7ed;
    padding: 10px 20px 20px 20px;
    ::v-deep .el-row {
      .el-col {
        margin-top: 10px;
      }
    }
  }
  .equipment-main{
    margin-top: 20px;
  }
}
</style>
